<template>
  <div class="monitor-container">
    <!-- 标题和状态 -->
    <div class="header">
      <h1>高压气监控系统</h1>
      <div class="status">
        <span class="connection-status" :class="{'connected': isConnected}">
          {{ isConnected ? '已连接' : '未连接' }}
        </span>
        <span class="last-update">最后更新: {{ lastUpdate }}</span>
      </div>
    </div>
    
    <!-- 实时曲线图 -->
    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
    
    <!-- 模拟量数据显示 -->
    <div class="simulate-values">
      <!-- 压力传感器 -->
      <div class="category">
        <h2><i class="fas fa-tachometer-alt"></i> 压力传感器</h2>
        <div class="sensor-group">
          <div v-for="id in [16, 20]" :key="id" class="sensor-item">
            <div class="sensor-label">
              {{ sensorNames[id] || `P${id}` }}:
            </div>
            <div class="sensor-value" :style="{color: getSensorColor(id)}">
              {{ getSensorValue(id) }} {{ id === 16 ? 'MPa' : 'kPa' }}
            </div>
          </div>
        </div>
      </div>
      
      <!-- 温度传感器 -->
      <div class="category">
        <h2><i class="fas fa-thermometer-half"></i> 温度传感器</h2>
        <div class="sensor-group">
          <div v-for="id in [17, 18, 21]" :key="id" class="sensor-item">
            <div class="sensor-label">
              {{ sensorNames[id] || `T${id}` }}:
            </div>
            <div class="sensor-value" :style="{color: getSensorColor(id)}">
              {{ getSensorValue(id) }} ℃
            </div>
          </div>
        </div>
      </div>
      
      <!-- 流量计 -->
      <div class="category">
        <h2><i class="fas fa-wind"></i> 流量计</h2>
        <div class="sensor-group">
          <div v-for="id in [15, 19]" :key="id" class="sensor-item">
            <div class="sensor-label">
              {{ sensorNames[id] || `F${id}` }}:
            </div>
            <div class="sensor-value" :style="{color: getSensorColor(id)}">
              {{ getSensorValue(id) }} m³/h
            </div>
          </div>
        </div>
      </div>
      
      <!-- 大气参数 -->
      <div class="category">
        <h2><i class="fas fa-cloud"></i> 大气参数</h2>
        <div class="sensor-group">
          <div class="sensor-item">
            <div class="sensor-label">大气压力:</div>
            <div class="sensor-value" :style="{color: getSensorColor(20)}">
              {{ getSensorValue(20) }} kPa
            </div>
          </div>
          <div class="sensor-item">
            <div class="sensor-label">大气温度:</div>
            <div class="sensor-value" :style="{color: getSensorColor(21)}">
              {{ getSensorValue(21) }} ℃
            </div>
          </div>
          <div class="sensor-item">
            <div class="sensor-label">大气湿度:</div>
            <div class="sensor-value" :style="{color: getSensorColor(22)}">
              {{ getSensorValue(22) }}%RH
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 报警对话框 -->
    <el-dialog
      v-for="(warn, index) in activeWarnings"
      :key="`${warn.id}-${warn.type}-${index}`"
      v-model="warn.visible"
      :title="`警告 - ${warn.deviceName} ${labelMap[warn.type]}信号`"
      :modal-class="'custom-warning-dialog'"
      width="400px"
      draggable
      :show-close="false"
      :style="{ 
        top: `${warn.topOffset}px`, 
        left: warn.leftOffset 
      }"
    >
      <template #footer>
        <el-button
          @click="removeDialog(warn)"
          style="background-color: #000; color: white; border: none"
        >
          关闭
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import * as echarts from 'echarts';
import initData from "../../initData";
import bus from '../../utils/bus';

// 传感器颜色配置
const sensorColors = {
  pressure: ['#5470c6', '#6e84f0'],
  temperature: ['#91cc75', '#a8d991', '#bfe6ad'],
  flow: ['#fac858', '#fad272'],
  atmosphere: ['#73c0de', '#8ccce6', '#a5d8ee']
};

export default {
  name: 'AirSystemMonitor',
  setup() {
    // 传感器名称映射
    const sensorNames = ref({
      15: '管路流量计1',
      16: '管路压力1',
      17: '温度传感器1',
      18: '温度传感器2',
      19: '管路流量计2',
      20: '大气压力',
      21: '大气温度',
      22: '大气湿度'
    });

    // 报警设备
    const warnings = ref([
      { id: 0, name: '管路流量报警', low: false, high: false, err: false },
      { id: 2, name: '压力报警', low: false, high: false, err: false },
      { id: 4, name: '温度报警', low: false, high: false, err: false },
      { id: 6, name: '露点报警', low: false, high: false, err: false },
      { id: 8, name: '空气流量报警', low: false, high: false, err: false },
      { id: 10, name: '大气压力报警', low: false, high: false, err: false },
      { id: 12, name: '大气温度报警', low: false, high: false, err: false },
      { id: 14, name: '大气湿度报警', low: false, high: false, err: false },
    ]);

    const labelMap = {
      low: '低',
      high: '高',
      err: '故障'
    };

    // 当前活动弹窗列表
    const activeWarnings = ref([]);

    // 初始化 WebSocket
    const { socket } = initData(true);
    const isConnected = ref(true);
    const lastUpdate = ref(new Date().toLocaleTimeString());
    
    // 图表实例
    const chart = ref(null);
    let chartInstance = null;

    // 模拟量数据存储
    const sensorValues = ref({});
    
    // 初始化传感器数据
    const initSensorValues = () => {
      // 压力传感器
      [16, 20].forEach(id => {
        sensorValues.value[id] = 0.00;
      });
      
      // 温度传感器
      [17, 18, 21].forEach(id => {
        sensorValues.value[id] = 0.00;
      });
      
      // 流量计
      [15, 19].forEach(id => {
        sensorValues.value[id] = 0.00;
      });
      
      // 大气参数
      [22].forEach(id => {
        sensorValues.value[id] = 0.00;
      });
    };

    // 获取传感器值
    const getSensorValue = (id) => {
      const value = sensorValues.value[id];
      if (id === 22) { // 湿度
        return value !== undefined ? value.toFixed(1) : '0.0';
      } else {
        return value !== undefined ? value.toFixed(2) : '0.00';
      }
    };

    // 获取传感器颜色
    const getSensorColor = (id) => {
      const value = sensorValues.value[id] || 0;
      
      if (id === 16 || id === 20) { // 压力传感器
        const index = [16, 20].indexOf(id);
        return value > (id === 16 ? 1.2 : 120) ? '#ee6666' : 
               value < (id === 16 ? 0.6 : 60) ? '#fac858' : 
               sensorColors.pressure[index];
      } 
      else if ([17, 18, 21].includes(id)) { // 温度传感器
        const index = [17, 18, 21].indexOf(id);
        return value > 50 ? '#ee6666' : 
               value < 30 ? '#fac858' : 
               sensorColors.temperature[index];
      } 
      else if ([15, 19].includes(id)) { // 流量计
        const index = [15, 19].indexOf(id);
        return value > 15 ? '#ee6666' : 
               value < 8 ? '#fac858' : 
               sensorColors.flow[index];
      }
      else if (id === 22) { // 湿度
        return value > 80 ? '#ee6666' : 
               value < 30 ? '#fac858' : 
               sensorColors.atmosphere[2];
      }
      
      return '#73c0de';
    };

    // 报警弹窗处理
    const showDialog = (type, deviceName, id) => {
      const now = Date.now();
      const cooldownKey = `${type}-${id}`;

      // 动态计算位置
      const visibleCount = activeWarnings.value.length;
      const top = 100 + (visibleCount % 3) * 130;
      const left = 31 + Math.floor(visibleCount / 3) * 30 + '%';

      activeWarnings.value.push({
        id,
        type,
        deviceName,
        visible: true,
        topOffset: top,
        leftOffset: left
      });
    };

    const removeDialog = (warn) => {
      const index = activeWarnings.value.indexOf(warn);
      if (index !== -1) {
        activeWarnings.value.splice(index, 1);
      }
    };

    // 解析报警值 & 弹窗判断
    const updateWarningValue = (id, newValue) => {
      const warning = warnings.value.find(w => w.id === id);
      if (warning) {
        // 反转二进制字符串方便低位访问
        const bits = parseInt(newValue, 16)
          .toString(2)
          .padStart(8, '0')
          .split('')
          .reverse();
        
        const triggers = {
          low: bits[0] === '1',
          high: bits[1] === '1',
          err: bits[2] === '1'
        };

        Object.entries(triggers).forEach(([type, isActive]) => {
          if (isActive && !warning[type]) {
            showDialog(type, warning.name, warning.id);
          }
          warning[type] = isActive;
        });
      }
    };

    // 生成动态系列配置
    const generateSeries = () => {
      return [
        // 压力传感器系列
        ...[16, 20].map((id, index) => ({
          name: `${sensorNames.value[id] || `P${id}`} (${id === 16 ? 'MPa' : 'kPa'})`,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 4,
          showSymbol: false,
          data: [],
          lineStyle: { 
            width: 1.5,
            color: sensorColors.pressure[index]
          },
          itemStyle: { 
            color: sensorColors.pressure[index]
          },
          emphasis: { 
            focus: 'series',
            itemStyle: {
              color: '#fff',
              borderColor: sensorColors.pressure[index],
              borderWidth: 2
            }
          },
          animation: false
        })),
        
        // 温度传感器系列
        ...[17, 18, 21].map((id, index) => ({
          name: `${sensorNames.value[id] || `T${id}`} (℃)`,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 4,
          showSymbol: false,
          data: [],
          lineStyle: { 
            width: 1.5,
            color: sensorColors.temperature[index]
          },
          itemStyle: { 
            color: sensorColors.temperature[index]
          },
          emphasis: { 
            focus: 'series',
            itemStyle: {
              color: '#fff',
              borderColor: sensorColors.temperature[index],
              borderWidth: 2
            }
          },
          animation: false
        })),
        
        // 流量计系列
        ...[15, 19].map((id, index) => ({
          name: `${sensorNames.value[id] || `F${id}`} (m³/h)`,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 4,
          showSymbol: false,
          data: [],
          lineStyle: { 
            width: 1.5,
            color: sensorColors.flow[index]
          },
          itemStyle: { 
            color: sensorColors.flow[index]
          },
          yAxisIndex: 1,
          emphasis: { 
            focus: 'series',
            itemStyle: {
              color: '#fff',
              borderColor: sensorColors.flow[index],
              borderWidth: 2
            }
          },
          animation: false
        })),
        
        // 大气湿度
        {
          name: `${sensorNames.value[22] || '湿度'} (%RH)`,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          showSymbol: false,
          data: [],
          lineStyle: { 
            width: 2, 
            color: sensorColors.atmosphere[2]
          },
          itemStyle: { 
            color: sensorColors.atmosphere[2]
          },
          yAxisIndex: 1,
          emphasis: { 
            focus: 'series',
            itemStyle: {
              color: '#fff',
              borderColor: sensorColors.atmosphere[2],
              borderWidth: 2
            }
          },
          animation: false
        }
      ];
    };

    // 初始化图表
    const initChart = () => {
      if (!chart.value) return;
      chartInstance = echarts.init(chart.value);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {
            let result = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`;
            params.forEach(param => {
              const marker = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${param.color}"></span>`;
              result += `${marker} ${param.seriesName}: <span style="font-weight:bold">${param.value}</span><br/>`;
            });
            return result;
          },
          backgroundColor: 'rgba(15, 27, 49, 0.9)',
          borderColor: 'rgba(255, 255, 255, 0.1)',
          textStyle: {
            color: '#fff'
          },
          extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);'
        },
        legend: {
          data: [
            ...[16, 20].map(id => `${sensorNames.value[id] || `P${id}`} (${id === 16 ? 'MPa' : 'kPa'})`),
            ...[17, 18, 21].map(id => `${sensorNames.value[id] || `T${id}`} (℃)`),
            ...[15, 19].map(id => `${sensorNames.value[id] || `F${id}`} (m³/h)`),
            `${sensorNames.value[22] || '湿度'} (%RH)`
          ],
          textStyle: { 
            color: '#fff',
            fontSize: 12
          },
          right: 120,
          top: 0,
          type: 'scroll',
          pageIconColor: '#fff',
          pageTextStyle: { 
            color: '#fff' 
          },
          pageButtonItemGap: 5,
          pageButtonGap: 10,
          pageButtonPosition: 'end',
          pageFormatter: '{current}/{total}',
          pageIcons: {
            horizontal: ['M0,0L12,-10L12,10Z', 'M0,0L-12,-10L-12,10Z']
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '18%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataZoom: { 
              yAxisIndex: false,
              title: {
                zoom: '区域缩放',
                back: '还原缩放'
              }
            },
            restore: { 
              title: '还原'
            },
            saveAsImage: { 
              title: '保存图片',
              pixelRatio: 2,
              backgroundColor: 'transparent',
              excludeComponents: ['toolbox']
            },
            magicType: { 
              type: ['line', 'bar'],
              title: {
                line: '切换折线图',
                bar: '切换柱状图'
              }
            }
          },
          iconStyle: {
            borderColor: '#fff',
            emphasis: {
              borderColor: '#3498db'
            }
          },
          tooltip: {
            show: true,
            backgroundColor: 'rgba(15, 27, 49, 0.9)',
            textStyle: {
              color: '#fff'
            }
          },
          right: 250,
          top: 30
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            zoomLock: false,
            filterMode: 'filter'
          },
          {
            type: 'slider',
            show: true,
            bottom: 25,
            start: 0,
            end: 100,
            height: 15,
            backgroundColor: 'rgba(255,255,255,0.1)',
            fillerColor: 'rgba(52, 152, 219, 0.3)',
            borderColor: 'transparent',
            handleStyle: {
              color: '#3498db',
              borderColor: '#3498db'
            },
            textStyle: {
              color: '#fff'
            },
            brushSelect: false,
            zoomLock: false,
            filterMode: 'filter'
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: '#7f8c8d'
            }
          },
          axisLabel: {
            color: '#bdc3c7',
            fontSize: 11,
            interval: (index) => {
              // 根据数据量动态调整显示间隔
              const dataCount = chartInstance?.getOption()?.xAxis[0]?.data?.length || 0;
              return dataCount < 30 ? 0 : Math.floor(dataCount / 10);
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '压力/温度',
            nameTextStyle: {
              color: '#bdc3c7',
              padding: [0, 0, 0, 40]
            },
            position: 'left',
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)',
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#7f8c8d'
              },
              onZero: false
            },
            axisLabel: {
              color: '#bdc3c7',
              formatter: '{value}'
            },
            axisTick: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          {
            type: 'value',
            name: '流量/湿度',
            nameTextStyle: {
              color: '#bdc3c7',
              padding: [0, 40, 0, 0]
            },
            position: 'right',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#7f8c8d'
              },
              onZero: false
            },
            axisLabel: {
              color: '#bdc3c7',
              formatter: '{value}'
            },
            axisTick: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          }
        ],
        series: generateSeries()
      };

      chartInstance.setOption(option);

      // 窗口大小变化时重新调整图表大小
      window.addEventListener('resize', function() {
        chartInstance && chartInstance.resize();
      });
    };

    // 更新图表数据
    const updateChart = () => {
      if (!chartInstance) return;

      const option = chartInstance.getOption();
      const now = new Date();
      const timeText = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
      
      // 限制数据量为100个点
      if (option.xAxis[0].data.length >= 100) {
        option.xAxis[0].data.shift();
        option.series.forEach(series => {
          if (Array.isArray(series.data)) {
            series.data.shift();
          }
        });
      }
      
      option.xAxis[0].data.push(timeText);
      
      // 更新所有系列数据
      option.series.forEach((series, index) => {
        if (!Array.isArray(series.data)) {
          series.data = [];
        }
        
        if (index < 2) { // 压力传感器 (0-1)
          const id = [16, 20][index];
          series.data.push(sensorValues.value[id]);
        } 
        else if (index < 5) { // 温度传感器 (2-4)
          const id = [17, 18, 21][index - 2];
          series.data.push(sensorValues.value[id]);
        }
        else if (index < 7) { // 流量计 (5-6)
          const id = [15, 19][index - 5];
          series.data.push(sensorValues.value[id]);
        }
        else if (index === 7) { // 湿度 (7)
          series.data.push(sensorValues.value[22]);
        }
      });

      chartInstance.setOption(option, {
        notMerge: true,
        lazyUpdate: true
      });
    };

    // 处理接收到的WebSocket数据
    const handleData = (rawData) => {
      try {
        const parsedData = typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
        
        if (parsedData.type === 5) {
          const dataItems = Array.isArray(parsedData.data) ? parsedData.data : [parsedData.data];
          
          console.log("高压空气数据:", dataItems);
          
          // 处理每个数据项
          dataItems.forEach(item => {
            const id = Number(item.id);
            const value = Number(item.data);
            
            // 根据ID范围分配处理逻辑
            if (id < 15) {
              updateWarningValue(id, value);
            } else if (id >= 15 && id < 23) {
              sensorValues.value[id] = value;
            }
          });
          
          // 更新图表和最后更新时间
          updateChart();
          lastUpdate.value = new Date().toLocaleTimeString();
        }
      } catch (error) {
        console.error("数据处理失败:", error);
        console.error("错误数据内容:", rawData);
      }
    };

    // 初始化
    onMounted(() => {
      initSensorValues();
      initChart();
      
      // 监听总线消息
      bus.on('sendMsg', handleData);
    });

    onBeforeUnmount(() => {
      bus.off('sendMsg', handleData);
      if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
      }
      window.removeEventListener('resize', function() {
        chartInstance && chartInstance.resize();
      });
    });

    return {
      sensorNames,
      chart,
      sensorValues,
      getSensorValue,
      getSensorColor,
      isConnected,
      lastUpdate,
      activeWarnings,
      labelMap,
      removeDialog
    };
  }
};
</script>

<style scoped lang="scss">
.monitor-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #0f1b31, #1c2e4a);
  color: white;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  position: fixed;
  left: 9%;
  top: 0%;
}

.header {
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.header h1 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 0.95rem;
}

.connection-status {
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: 500;
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  transition: all 0.3s ease;
}

.connection-status.connected {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.last-update {
  color: #bdc3c7;
  font-size: 0.9rem;
}

.chart-container {
  flex: 1;
  min-height: 400px;
  max-height: 50vh;
  width: 90%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  position: relative;
}

.chart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.simulate-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-height: calc(40vh - 60px);
  width: 90%;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 20px;
}

.category {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.3s ease;
}

.category:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

.category h2 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3498db;
}

.category h2 i {
  width: 20px;
  text-align: center;
}

.sensor-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.sensor-item {
  display: flex;
  flex-direction: column;
  background: rgba(30, 40, 60, 0.7);
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sensor-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background: rgba(40, 50, 70, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.sensor-label {
  font-size: 0.85rem;
  color: #bdc3c7;
  margin-bottom: 5px;
  white-space: nowrap;
}

.sensor-value {
  font-size: 1.3rem;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  transition: all 0.3s ease;
}

/* 自定义滚动条 */
.simulate-values::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.simulate-values::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.simulate-values::-webkit-scrollbar-thumb {
  background: rgba(52, 152, 219, 0.5);
  border-radius: 4px;
}

.simulate-values::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 152, 219, 0.7);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .simulate-values {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 992px) {
  .header h1 {
    font-size: 1.8rem;
  }
  
  .sensor-group {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  
  .sensor-value {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .monitor-container {
    padding: 15px;
  }
  
  .header h1 {
    font-size: 1.6rem;
  }
  
  .status {
    flex-direction: column;
    gap: 8px;
  }
  
  .simulate-values {
    grid-template-columns: 1fr;
  }
  
  .sensor-group {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 1.4rem;
  }
  
  .category {
    padding: 12px;
  }
  
  .sensor-item {
    padding: 10px;
  }
  
  .sensor-label {
    font-size: 0.8rem;
  }
  
  .sensor-value {
    font-size: 1rem;
  }
}

/* 报警对话框样式 */
::v-deep(.custom-warning-dialog) {
  color: red;
}

::v-deep(.el-dialog) {
  position: absolute !important;
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

::v-deep(.el-dialog__header) {
  font-size: 18px;
  font-weight: bold;
  cursor: move;
}

::v-deep(.el-dialog__footer) {
  text-align: right;
  padding: 10px 20px;
}

/* 确保对话框可见 */
::v-deep(.el-overlay) {
  pointer-events: none; /* 允许穿透点击 */
}

::v-deep(.el-dialog.is-draggable) {
  pointer-events: auto;
}
</style>